<template>
  <div class="echart-grid">
    <el-form>
      <VsFormItem
        v-for="(item, i) in btnDist"
        :key="i"
        :label="$demoi18n(`relationship.label.${item.label}`)"
      >
        <Range
          v-model:value="item.value"
          :min="0"
          :max="2000"
          type="input"
        />
      </VsFormItem>
    </el-form>
    <el-form>
      <VsFormItem
        v-for="(item, i) in btnSize"
        :key="i"
        :label="$demoi18n(`panel.label.${item.size.label}`)"
      >
        <Range
          v-model:value="item.size.value"
          :min="0"
          :max="1000"
          type="input"
        />
        <el-radio-group
          v-model="item.unit"
          size="default"
          class="units"
        >
          <el-radio-button
            v-for="(n, i) in item.units"
            :key="i"
            :label="n.value"
          >{{ n.label }}</el-radio-button>
        </el-radio-group>
      </VsFormItem>
    </el-form>
  </div>
</template>
<script>
import Range from '@/components/common/range/range';
export default {
  components: { Range },
  mixins: [],
  props: {
    form: Object,
    active: String,
  },
  data() {
    return {
      btnDist: this.form.exportBtnDist,
      btnSize: this.form.exportBtnSize,
    };
  },
  computed: {},
  watch: {
    active(val) {
      this.btnDist = val === 'first' ? this.form.exportBtnDist : this.form.checkBtnDist;
      this.btnSize = val === 'first' ? this.form.exportBtnSize : this.form.checkBtnSize;
    },
  },
  methods: {},
};
</script>
<style lang="less" scoped>
:deep(.units) {
  flex-basis: 62px !important;
  margin-left: 5px;
  display: flex;
  .el-radio-button__inner {
    padding: 6px 6px;
  }
}
</style>
